<template>
  <div class="app-container">

  		<!-- element-ui 颜色选择器 -->
    <span>设置背景颜色:</span>
		<el-color-picker v-model="leftbackground"></el-color-picker>
    <span>设置字体颜色:</span>
		<el-color-picker v-model="leftcolor"></el-color-picker>
    <br>
    <br>
    <span>设置字体大小：</span>
    <el-progress style="width:300px;" :percentage="percentage" :color="customColor"></el-progress>
    <div>
      <el-button-group>
        <el-button icon="el-icon-minus" @click="decrease"></el-button>
        <el-button icon="el-icon-plus" @click="increase"></el-button>
      </el-button-group>
    </div>


    <div>
   		<!-- leftbackground  跟  leftcolor是我自定义设置的 -->
	   <pre>	<div :style="'white-space: pre-wrap; overflow:auto; margin: auto; height:100%;	width:1000px; ;backgroundColor:'+leftbackground+';color:'+leftcolor+';font-size:'+percentage/2+'px'" class='DivClass'>
         <span > 第{{this.chapterNum}}章  : {{ this.title }} </span>
         <br>
         {{this.content}} 
      </div>
    </pre>

		</div>

        <el-button @click="proChapter()" class="probtn" type="success">上一章</el-button>
        <el-button  @click="nextChapter()" class="nextbtn" type="success">下一章</el-button>

        <el-card class="box-card" style="margin-top: 50px;margin-left: 100px;">
          <div slot="header" class="clearfix">
            <span style="margin: 20px 0;">我的笔记：
               <el-button style="float: right; padding: 3px 0" type="text"  @click="addNote" >确认添加</el-button>
                       
              <el-input
                type="textarea"
                placeholder="新添笔记"
                v-model="textarea"
                maxlength="60"
                show-word-limit
              />
            </span>
            
          </div>  
          <div v-for="(value, key, index) in noteList"
            
            :key="key"
            :offset="index > 0 ? 4 : 0" class="text item">
            {{value.createTime}}:<br>
            {{value.content}}
          </div>
        </el-card>


        <el-card class="box-card" style="margin-top: 50px;margin-left: 100px;">
          <div slot="header" class="clearfix">
            <span>心得分享：
            
              <el-button style="float: right; padding: 3px 0" type="text" @click="addmyExperience">确认分享</el-button>
                       
              <el-input
                type="textarea"
                placeholder="分享我的心得"
                v-model="newExperience"
                maxlength="60"
                show-word-limit
              />
            </span>
            
          </div>
         <div v-for="(value, key, index) in myExperience"
            
            :key="key"
            :offset="index > 0 ? 4 : 0" class="text item">
            用户：{{value.username}} 于
            {{value.createTime}} 发表:<br>
            {{value.content}}
          </div>
        </el-card>

      

    
  </div>
</template>
<script>
//引入调用slideShow.js文件
import bankApi from "@/api/bank";
import booksShowApi from "@/api/booksShowApi";
export default {
  //写核心代码位置
  // data:{
  // },
  data() {
    //定义变量和初始值
    return {
        bookID:this.$route.params.bookId,
        cuchapterNum: this.$route.params.chapterNum,
        id:this.$route.params.id ,
        newExperience:'',//新添心得
        myExperience:{},//心得列表
        currentChapterId:'',
        textarea:'',//新笔记
        noteList:{},
        content:'',//内容
        title:'',//标题
        chapterNum:'',//章节数
        percentage: 40,
        customColor: '#409eff',
        customColors: [
          {color: '#f56c6c', percentage: 20},
          {color: '#e6a23c', percentage: 40},
          {color: '#5cb87a', percentage: 60},
          {color: '#1989fa', percentage: 80},
          {color: '#6f7ad3', percentage: 100}
        ],
      leftcolor:'#606266',//设置默认字体颜色
      leftbackground:'#fff' , //设置默认背景颜色
      listLoading: true, // 是否显示loading信息
      list: null, //查询之后接口返回集合
      page: 1, //当前页
      limit: 5, //每页记录数
      total: 0, //总记录数
      bank: {
        // name: "",
        // startTime: "",
        // endTime: "",
      }, //条件封装对象
    };
  },
  created() {

  },
  mounted() {
    this.addvisits(this.$route.params.bookId);
    this.bookID=this.$route.params.bookId,
    this.cuchapterNum= this.$route.params.chapterNum,
    this.id=this.$route.params.id ,
    this.getcurretChapter(this.$route.params.bookId,this.cuchapterNum);
    this. getNoteList(this.$route.params.id)
    this. getExperienceList(this.$route.params.id)
  },
  methods: {
    addvisits(bookId){
        booksShowApi.addvisits(bookId).then((response) => {
        
      });
   
    },
    getExperienceList(id){
        booksShowApi.getExperienceList(id).then((response) => {
        console.log(response);    
        this.myExperience = response.data ;
        console.log(this.myExperience);
      })
    },
       addmyExperience(){
            booksShowApi.addmyExperience(this.id,this.newExperience).then((response) => {
            this.$message({
              type: "success",
              message: "心得添加成功!",
            });
            this.newExperience='',
             //回到列表页面 路由跳转this.$route.params.bookId,this.$route.params.chapterNum
               
            this. getExperienceList(this.id)
             }); 
       },
       addNote(){
        booksShowApi.addNote(this.id,this.textarea).then((response) => {
            this.$message({
              type: "success",
              message: "笔记添加成功!",
            });
            this.textarea = '',
             //回到列表页面 路由跳转this.$route.params.bookId,this.$route.params.chapterNum
               this. getNoteList(this.id)
   
        });
       },

       getNoteList(id){
        booksShowApi.getNoteList(id).then((response) => {
        console.log(response);    
        this.noteList = response.data ;
        console.log(this.noteList);
      })
      },

       getcurretChapter(bookId,chapterNum){
        booksShowApi.getcurretChapter(bookId,chapterNum).then((response) => {
        console.log(response);    
        this.content = response.data.content ;
        this.title= response.data.title ;
        this.chapterNum= response.data.chapterNum ;
        console.log(this.content);
      })
      },

        nextChapter(){
        this.chapterNum+=1
        booksShowApi.getcurretChapter(this.$route.params.bookId,this.chapterNum).then((response) => {
        console.log(response);    
        this.content = response.data.content ;
        this.title= response.data.title ;
        this.cuchapterNum= response.data.chapterNum ;
        this.id = response.data.id;
        this.getNoteList(response.data.id);
        this. getExperienceList(response.data.id);
        console.log(this.content);
      })
      },

      proChapter(){
        this.chapterNum -=1
        booksShowApi.getcurretChapter(this.$route.params.bookId,this.chapterNum).then((response) => {
        console.log(response);    
        this.content = response.data.content ;
        this.title= response.data.title ;
        this.cuchapterNum= response.data.chapterNum ;
        this.id = response.data.id;
        this.getNoteList(response.data.id);
        this. getExperienceList(response.data.id);
        console.log(this.content);
       
      })
      },

      customColorMethod(percentage) {
        if (percentage < 30) {
          return '#909399';
        } else if (percentage < 70) {
          return '#e6a23c';
        } else {
          return '#67c23a';
        }
      },
      increase() {
        this.percentage += 10;
        if (this.percentage > 100) {
          this.percentage = 100;
        }
      },
      decrease() {
        this.percentage -= 10;
        if (this.percentage < 0) {
          this.percentage = 0;
        }
      }

  },
};
</script>
<style>
.probtn{
  margin-left:400px ;

}
.nextbtn{
   margin-left:600px ;
}
	.DivClass{
		height:200px;
		width:200px;
   
	}
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
    
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }
</style>